<!--
 * @Author: zhao 13370229059@163.com
 * @Date: 2024-04-09 23:12:55
 * @LastEditors: zhao 13370229059@163.com
 * @LastEditTime: 2024-06-11 23:33:21
 * @FilePath: \dance\pages\index\index2Compontents\danceRoom.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <view class="dances">
    <view v-for="(item, index) in ajax.list" :key="item.id" @click="onGoDancingRoom(item)">
      <view class="dances-item">
        <view class="image">
          <uv-image
            :src="(item.licenses.length && item.licenses[0].imgPath) || defaultImagesList[$uv.random(0, defaultImagesList.length - 1)]"
            height="100%"
            width="100%"
            radius="21rpx"
          ></uv-image>
        </view>
        <view class="info">
          <view class="info-head">
            <view class="flex-2">
              <view class="name"> {{ item.headquater.name }}&nbsp;({{ item.name }}) </view>
              <view class="address">
                {{ item.location && item.location.district + item.location.detail }}
              </view>
            </view>
            <view class="flex flex-1 just-cont-right">
              <view
                class="collect"
                :style="{
                  backgroundColor: item.collected.id ? '#B1B1B1' : '#FF7A66'
                }"
                @click.stop="httpCollect(item)"
              >
                {{ item.collected.id ? '已收藏' : '+收藏' }}
              </view>
            </view>
          </view>
          <view class="info-foot">
            <view>
              <view>舞房数：{{ item.rooms || 0 }}间</view>
              <view class="info-foot-lesson"> 课程数：{{ (item.lessonCount && item.lessonCount.value) || 0 }} </view>
            </view>
            <view> 老师数：{{ (item.teacherCount && item.teacherCount.value) || 0 }} </view>
          </view>
        </view>
      </view>
      <uv-line color="#545454"></uv-line>
    </view>
    <view v-if="ajax.list.length === 0" class="dances-empty">
      <uv-empty mode="list" text="未找到匹配的搜索结果"></uv-empty>
    </view>
    <uv-toast ref="toastRef"></uv-toast>
  </view>
</template>

<script setup>
  import { defaultImages, defaultImagesList } from '@/common/js/global.js';
  import { ref, reactive, computed, defineProps, watch, defineExpose } from 'vue';
  const toastRef = ref();
  let ajax = reactive({
    list: []
  });
  let initShow = ref(false);
  let props = defineProps({
    modelValue: {
      type: Number,
      default: 0
    }
  });
  let params = reactive({
    pageSize: 10,
    currentPage: 1,
    keyword: '',
    start: '',
    end: '',
    orderBy: []
  });
  let httpGetDanceList = async (type = 'search') => {
    let { merchants } = await uni.$uv.http.post('app/merchant/all', params);
    if (type === 'search') {
      ajax.list.splice(0, ajax.list.length, ...merchants);
    } else if (type === 'scrollDown') {
      ajax.list.push(...merchants);
    } else if (type === 'update') {
      merchants.map(r => {
        let index = ajax.list.findIndex(row => r.id === row.id);
        if (index > -1) {
          ajax.list.splice(index, 1, r);
        }
      });
    }
  };
  watch(
    () => props.modelValue,
    val => {
      if (!val) return;
      if (val === 2 && !initShow.value) {
        httpGetDanceList();
        initShow.value = true;
      }
    },
    { immediate: true }
  );
  const onGoDancingRoom = val => {
    uni.$uv.route({
      url: '/pages/dancingRoom/dancingRoom',
      params: {
        id: val.id
      }
    });
  };
  // 触发子组件更新事件
  const sonChange = ({ type, val }) => {
    if (type == 'scrollDown') {
      params.currentPage++;
    } else if (type === 'search') {
      params.currentPage = 1;
      Object.keys(val).map(key => {
        params[key] = val[key];
      });
    }
    httpGetDanceList(type);
  };
  defineExpose({ sonChange });
  let httpCollect = async val => {
    await uni.$uv.http.post(`app/collect/${!val.collected.id ? 'add' : 'cancel'}`, {
      classify: 'Merchant', //收藏类型
      objid: val.id, //收藏对象的数据ID
      optype: 'collect' //操作类型
    });
    val.collected.id = val.collected.id ? 0 : 1;
    toastRef.value.show({
      overlay: false,
      message: `${val.collected.id ? '' : '取消'}收藏成功`,
      type: 'success'
    });
  };
</script>

<style lang="scss" scoped>
  .flex-1 {
    flex: 1;
  }
  .flex-2 {
    flex: 2;
  }
  .flex-3 {
    flex: 3;
  }
  .flex {
    display: flex;
  }
  .just-cont-right {
    justify-content: right;
  }
  .dances {
    display: flex;
    flex-direction: column;
    // height: 100%;
    overflow: hidden;
    margin-top: 24rpx;
    padding: 0 26rpx 105rpx;
    color: #fff;
    &-empty {
      color: #808080;
      font-size: 26rpx;
      margin: 0 26rpx;
      &-text {
        text-align: center;
        margin-top: 21rpx;
        border-bottom: 1px solid #545454;
        padding-bottom: 49rpx;
      }
    }
    &-item {
      display: flex;
      padding: 19rpx 0;
      .image {
        width: 174rpx;
        height: 239rpx;
      }
      .info {
        flex: 1;
        margin-left: 14rpx;
        &-head {
          display: flex;
          padding-left: 24rpx;
          .name {
            font-size: 35rpx;
            margin-bottom: 5rpx;
            word-wrap: break-word;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
          }
          .address {
            font-size: 24rpx;
            color: #808080;
            word-wrap: break-word;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
          }
          .collect {
            font-size: 28rpx;
            width: 124rpx;
            height: 51rpx;
            line-height: 51rpx;
            text-align: center;
            border-radius: 49rpx;
          }
        }
        &-foot {
          margin-top: 12rpx;
          font-size: 26rpx;
          overflow: hidden;
          padding: 26rpx 96rpx 30rpx 24rpx;
          background-color: #393939;
          border-radius: 21rpx;
          display: flex;
          justify-content: space-between;
          &-lesson {
            margin-top: 21rpx;
          }
        }
        &-price {
          margin-top: 21.16rpx;
          font-size: 41.86rpx;
          color: #ffcb68;
          margin-left: 81.98rpx;
          font-weight: bold;
          &__signal {
            font-weight: 200;
            font-size: 26.16rpx;
          }
          &__txt {
            font-weight: normal;
            font-size: 24.42rpx;
            color: #959595;
            margin-left: 12.21rpx;
          }
        }
      }
    }
  }
</style>
